<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="pamars">
      <el-form-item label="订单编号">
        <el-input v-model="pamars.business_code" placeholder="订单编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="交易单号">
        <el-input v-model="pamars.third_pay_code" placeholder="交易单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="收入支出">
        <el-select v-model="pamars.bill_mode" @change="changeData" clearable placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="交易类型" v-if="pamars.bill_mode == '1'">
        <el-select v-model="pamars.bill_type" clearable placeholder="请选择">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!--       <el-select v-model="pamars.bill_type" v-if="pamars.bill_mode==0" clearable placeholder="请选择">
         <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
       </el-select> -->
      </el-form-item>
      <el-form-item label="交易类型" v-if="pamars.bill_mode == '0'">
        <el-select v-model="pamars.bill_type" clearable placeholder="请选择">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="business_code" align="center" label="订单编号">
      </el-table-column>
      <el-table-column prop="third_pay_code" align="center" label="交易单号">
      </el-table-column>
      <el-table-column prop="bill_mode" align="center" :formatter="billMode" label="收入/支出">
      </el-table-column>
      <el-table-column prop="bill_type" align="center" :formatter="billType" label="交易类型">
      </el-table-column>
      <el-table-column align="center" label="交易账户">
        <template slot-scope="scope">
          <div v-if="scope.row.pay_mode == 0">余额</div>
          <div v-if="scope.row.pay_mode == 1">微信</div>
          <div v-if="scope.row.pay_mode == 2">支付宝</div>
          <div v-if="scope.row.pay_mode == 3">
            {{ scope.row.bank_name }}
            {{ scope.row.withdraw_account }}
          </div>
          <div v-if="scope.row.pay_mode == 4">现金支付</div>
          <div v-if="scope.row.pay_mode == 5">积分支付</div>
          <div v-if="scope.row.pay_mode == 6">积分+余额支付</div>
          <div v-if="scope.row.pay_mode == 7">积分+微信支付</div>
          <div v-if="scope.row.pay_mode == 8">积分+支付宝支付</div>
          <div v-if="scope.row.pay_mode == 9">公益积分</div>
          <div v-if="scope.row.pay_mode == 10">支付宝支付(Adapay)</div>
          <div v-if="scope.row.pay_mode == 12">支付宝支付(慧收钱)</div>
          <div v-if="scope.row.pay_mode == 14">银行卡支付</div>
        </template>
      </el-table-column>
      <el-table-column prop="money" align="center" label="交易金额">
      </el-table-column>
      <el-table-column prop="create_time" align="center" label="交易时间">
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pamars.page" :page-sizes="[10, 20, 50, 100]"
      :page-size="pamars.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
  </div>
</template>

<script>
import seviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      dataForm: {},
      pamars: {
        page: 1,
        limit: 10,
        business_code: '',
        third_pay_code: '',
        bill_mode: null,
        bill_type: null
      },
      totalPage: 0,
      dataList: [],
      options: [{
        value: '0',
        label: '出账'
      }, {
        value: '1',
        label: '入账'
      }],
      options2: [
        //   {
        //   value: '0',
        //   label: '余额充值'
        // },
        {
          value: '1',
          label: '购买商品或服务'
        }],
      options3: [{
        value: '2',
        label: '退款'
      }, {
        value: '3',
        label: '商家所得提现'
      }, {
        value: '4',
        label: '会员分佣金提现'
      }],
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {},
  mounted () {
    this.getList()
  },
  methods: {
    changeData (e) {
      this.pamars.bill_type = null
    },
    billMode (row, column) {
      let status = row.bill_mode
      if (status === 0) {
        return '出账'
      } else {
        return '入账'
      }
    },
    billType (row, column) {
      let status = row.bill_type
      if (status === 0) {
        return '余额充值'
      } else if (status === 1) {
        return '购买商品或服务'
      } else if (status === 2) {
        return '退款'
      } else if (status === 3) {
        return '商家所得提现'
      } else if (status === 4) {
        return '会员分佣金提现'
      }
    },
    getList () {
      seviceApi.getBillList(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pamars.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.pamars.page = 1
      this.getList()
    }
  }
}
</script>
